<!--
 * @Author: xcl
 * @Date: 2022-04-20 18:05:17
 * @LastEditors: xcl
 * @LastEditTime: 2022-09-13 14:22:16
 * @Description: 首页
-->

<template>
  <div>
    <cesium-map :type="2"></cesium-map>
    <el-slider
      class="slider"
      :min="-9.4"
      :max="3"
      :step="0.1"
      height="500px"
      vertical
      v-model="distance"
      :marks="marks"
    ></el-slider>
    <el-button class="sectionBtn" @click="transform('1-0')" type="primary" plain
      >完整 --> 一层</el-button
    >
    <el-button class="sectionBtn" @click="transform('0-1')" type="success" plain
      >一层 --> 完整</el-button
    >
    <transition name="el-zoom-in-top">
      <el-card v-show="show" class="box-card">
        <div slot="header" class="clearfix">
          <span>门牌号:{{ id }}</span>
        </div>
        <div class="text item">房屋名称: {{ title }}</div>
        <br />
        <div class="text item">当前楼层人员数量: {{ num_people }}人</div>
      </el-card>
    </transition>
  </div>
</template>

<script>
import CesiumMap from "@/components/map/CesiumMap.vue";
export default {
  name: "Home",
  components: { "cesium-map": CesiumMap },
  data() {
    return {
      distance: -7.2,

      marks: {
        3: "完整",
        0.4: "顶层",
        "-3.4": "二层",
        "-7.2": "一层",
      },

      type: null,

      startTime: null,

      pointArr: {
        1: [
          {
            x: -2177787.6297644353,
            y: 4388731.196832342,
            z: 4070048.7938087536,
            id: "1-1",
            title: "图书室",
          },
          {
            x: -2177761.5004380047,
            y: 4388733.578245246,
            z: 4070060.28860154,
            id: "0",
            title: "门亭",
          },
        ],
        2: [
          {
            x: -2177752.2186380704,
            y: 4388752.382230936,
            z: 4070050.9984062584,
            id: "2-4",
            title: "会议室",
          },
          {
            x: -2177747.8261627043,
            y: 4388743.574758113,
            z: 4070062.76953117,
            id: "2-5",
            title: "放映室",
          },
        ],
        3: [
          {
            x: -2177801.452204966,
            y: 4388731.359768745,
            z: 4070053.1129040658,
            id: "3-1",
            title: "乒乓球场",
          },
          {
            x: -2177762.814590767,
            y: 4388751.391426883,
            z: 4070052.1986617153,
            id: "3-6",
            title: "2号储物间",
          },
        ],
      },

      show: false,

      id: 2233,
      title: 0,
      num_people: 0,
    };
  },
  computed: {},
  props: {},
  watch: {},
  created() {},
  mounted() {
    // this.addModel();
    this.addTileset();
    window.vmCesiumViewer.scene.postUpdate.addEventListener(
      this.renderCallback
    );

    this.click();
    this.for();
  },
  methods: {
    for() {
      let obj = this.pointArr;
      for (const key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
          const element = obj[key];
          this.billboard(key, element);
        }
      }
      setTimeout(() => {
        this.monitor();
      }, 30);
    },
    click() {
      const viewer = window.vmCesiumViewer;
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      let self = this;
      handler.setInputAction(function (CLICK) {
        var pick = viewer.scene.pick(CLICK.position);
        if (pick) {
          // console.log(pick);
          if (pick?.id?.click) pick.id.click();
          else {
            self.show = false;
          }
        } else {
          self.show = false;
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    // 广告牌
    billboard(dataSourceName, arr) {
      const viewer = window.vmCesiumViewer;
      let dataSource = new Cesium.CustomDataSource(dataSourceName + "");
      let self = this;
      viewer.dataSources.add(dataSource);
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        let entitie = dataSource.entities.add({
          position: new Cesium.Cartesian3(
            element.x,
            element.y,
            element.z
            // (dataSourceName - 1) * 4
          ),
          name: "billboard",
          billboard: {
            image: "./static/img/point.png",
            show: true,
            scale: 2.0,
            width: 32,
            height: 32,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              7000
            ),

            disableDepthTestDistance: Number.POSITIVE_INFINITY,
          },
          label: {
            show: true,
            text: element.id,
            scale: 1.0,

            fillColor: Cesium.Color.DARKORANGE,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              0,
              7000
            ),
            pixelOffset: new Cesium.Cartesian2(0, 45),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
          },
        });
        entitie.click = function () {
          self.id = element.id;
          self.title = element.title;
          self.num_people = Math.round(Math.random() * 20);
          self.show = true;
        };
      }
    },
    monitor() {
      const viewer = window.vmCesiumViewer;
      if (this.distance <= -7.2) {
        viewer.dataSources.getByName("1")[0].show = true;
        viewer.dataSources.getByName("2")[0].show = false;
        viewer.dataSources.getByName("3")[0].show = false;
      } else if (this.distance <= -3.4) {
        viewer.dataSources.getByName("1")[0].show = false;
        viewer.dataSources.getByName("2")[0].show = true;
        viewer.dataSources.getByName("3")[0].show = false;
      } else if (this.distance <= 0.4) {
        viewer.dataSources.getByName("1")[0].show = false;
        viewer.dataSources.getByName("2")[0].show = false;
        viewer.dataSources.getByName("3")[0].show = true;
      } else {
        viewer.dataSources.getByName("1")[0].show = false;
        viewer.dataSources.getByName("2")[0].show = false;
        viewer.dataSources.getByName("3")[0].show = false;
      }
    },
    // cesium 每帧回调
    renderCallback() {
      if (this.type == "1-0") {
        if (!this.startTime) {
          this.startTime = new Date() - 0;
          return;
        }
        let num = ((new Date() - this.startTime) / 16.66) * 0.0425;
        this.distance -= num;
        this.startTime = new Date() - 0;
        if (this.distance < -7.2) {
          this.distance = -7.2;
          this.type = null;
        }
      } else if (this.type == "0-1") {
        if (!this.startTime) {
          this.startTime = new Date() - 0;
          return;
        }
        let num = ((new Date() - this.startTime) / 16.66) * 0.0425;
        this.distance += num;
        this.startTime = new Date() - 0;
        if (this.distance > 3) {
          this.distance = 3;
          this.type = null;
        }
      }
    },
    transform(str) {
      if (str == "0-1") {
        this.distance = -7.2;
        this.type = "0-1";
      } else {
        this.distance = 3;
        this.type = "1-0";
      }
      this.startTime = null;
    },
    // 添加模型
    addModel() {
      const viewer = window.vmCesiumViewer;

      const clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: [
          new Cesium.ClippingPlane(
            new Cesium.Cartesian3(0.0, 0.0, -1.0), // 相对于模型中心的点位，决定了剖切方向
            5.0 // 离法线距离
          ),
        ],
        edgeColor: Cesium.Color.WHITE,
        edgeWidth: 1,
      });

      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(108.937008, 34.233938, 0),
        orientation: Cesium.Transforms.headingPitchRollQuaternion(
          Cesium.Cartesian3.fromDegrees(108.937008, 34.233938, 0),
          new Cesium.HeadingPitchRoll(
            6.236132643031626,
            // -0.5318641536528257,
            0.0,
            0.0
          )
        ),
        name: "model",
        model: {
          uri: "./static/model_y/Cesium_Man.glb",
          scale: 500,
          clippingPlanes,
        },
      });
      // 剖切面
      viewer.entities.add({
        // position: model.position.getValue(),
        position: Cesium.Cartesian3.fromDegrees(108.937008, 34.233938, 0),
        plane: {
          dimensions: new Cesium.Cartesian2(1000, 2000),
          material: Cesium.Color.WHITE.withAlpha(0.1),
          plane: new Cesium.CallbackProperty(
            this.createPlaneUpdateFunction(clippingPlanes.get(0)),
            false
          ),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
        },
      });
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          108.964093,
          34.218936,
          2107.0065144236137
        ),
        orientation: {
          heading: 5.236132643031626,
          pitch: -0.5318641536528257,
          roll: 0.0,
        },
      });
    },
    // 添加建筑
    addTileset() {
      const viewer = window.vmCesiumViewer;

      const clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: [
          new Cesium.ClippingPlane(
            new Cesium.Cartesian3(0.0, 0.0, -1.0), // 相对于模型中心的点位，决定了剖切方向
            5.0 // 离法线距离
          ),
        ],
        edgeColor: Cesium.Color.WHITE,
        edgeWidth: 1,
      });

      let tileset = new Cesium.Cesium3DTileset({
        // url: "/nn/static/tileset/新竹-实景风格/tileset.json",
        // url: "./static/model_y/house/tileset.json",
        url: "//lab.earthsdk.com/model/d16c1ce0ac2d11e99dbd8fd044883638/tileset.json",

        modelMatrix: Cesium.Matrix4.fromArray([
          1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
        ]),
        show: true,

        // clippingPlanes,
      });

      // 剖切面
      viewer.entities.add({
        // position: model.position.getValue(),
        position: Cesium.Cartesian3.fromDegrees(
          116.39146722726551,
          39.906950862690075,
          9.5
        ),
        plane: {
          dimensions: new Cesium.Cartesian2(80, 80),
          material: Cesium.Color.WHITE.withAlpha(0.1),
          plane: new Cesium.CallbackProperty(
            this.createPlaneUpdateFunction(clippingPlanes.get(0)),
            false
          ),
          outline: true,
          outlineColor: Cesium.Color.WHITE,
        },
      });
      tileset.clippingPlanes = clippingPlanes;
      viewer.scene.primitives.add(tileset);
      viewer.flyTo(tileset);
    },
    createPlaneUpdateFunction(plane) {
      let self = this;
      return function () {
        plane.distance = self.distance; // 修改距离法线距离
        self.monitor();
        return plane;
      };
    },
    addClippingPlanes(tileset, clippingPlanesOption) {
      const clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: [
          new Cesium.ClippingPlane(
            new Cesium.Cartesian3(0.0, 0.0, -1.0), // 相对于模型中心的点位，决定了剖切方向
            5.0 // 离法线距离
          ),
        ],
        edgeColor: Cesium.Color.WHITE,
        edgeWidth: 1,
        ...clippingPlanesOption,
      });
      tileset.clippingPlanes = clippingPlanes;
      return clippingPlanes;
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="less">
#home {
  height: calc(100vh - 60px);
  overflow: hidden;
  overflow-y: auto;
  background-color: white !important;
}
.slider {
  position: fixed;
  width: 30px;
  left: 10vw;
  bottom: 800px;
  .el-slider__marks div {
    color: white;
    margin-left: 15px;
  }
}
.sectionBtn {
  margin: 0 !important;
  position: absolute;
  left: 100px;
  bottom: 200px;
  & + button {
    bottom: 150px;
  }
}
</style>
